// window.onload =function(){

    // var box = document.getElementById('box');

    // box.onclick = function(){

    //     this.style.background = "blue";
    // }


  //  alert(jQuery);

  //  alert($);


// }



/*

   【1】加载速度：

        window.onload = fucntion(){}     ------表示的是：HTML文档中【所有的DOM元素】全部加载完成后执行。      ----包括：节点、图片、多媒体、及文档的加载

       $(fn)                            ------表示的是：HTML文档中【所有的标签节点】加载完成后执行。          ----不包括：图片、多媒体、及文档的加载


   【2】 jQuery的【DOM节点】获取。

       可以通过【ID】、【CLASS】、【元素标签名称】来直接获取【DOM节点】。

      $('#ID)     $('.CLASS')    $('标签名')


    【3】 jQuery的【CSS样式】设定。


       节点.css('属性名','属性值')

       节点.css('属性名','属性值').css('属性名','属性值');

      节点.css({

           属性名:'属性值',
           属性名:'属性值',
           属性名:'属性值'


      })


     //-----获取CSS样式的值  --------【注意】：1， 可以获取【内嵌式CSS】、【外链式CSS】、【行内CSS】。
     
                                            2， Javascript只能获取【行内CSS】





    【4】jQuery中的事件


       事件名(fn)


      box.click(function(){   执行程序    })

*/





$(function(){


  // var box = document.getElementById('box');

    var box = $('#box');
    // var box = $('.pox')
    // var box = $('div')


  box.click(function (e) {

      // console.log(e);

      // box.css('background','blue');


      // alert(box.css('background-color'));


      // box.css('background', 'blue').css("color","#fff");


    // box.css('background', 'blue')
    //    .css("color", "#fff")
    //    .css("font-size", "50px");


    // box.css({

    //    background:'blue',
    //    color:'#fff',
    //    fontSize:'30px'

    // });



     box.animate({

           left:'300px',
          //  borderRadius:'100px',

           width:"300px",
           height:"300px"


     });





  });




   
  // alert(box);


});
